<template>
  <div class="mod-demo-echarts">
    <!-- <el-alert title="提示：" type="warning" :closable="false">
      <div slot-scope="description">
        <p class="el-alert__description">1. 此Demo只提供ECharts官方使用文档，入门部署和体验功能。具体使用请参考：http://echarts.baidu.com/index.html
        </p>
      </div>
    </el-alert> -->

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <el-form>
            <el-form-item>
              车船票订单量:
              <el-date-picker
              @change="ChartPzSyt($event)"
                v-model="upPst"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div id="J_chartPzSytBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <el-form>
            <el-form-item>
              全年纯收益:
              <el-select v-model="profit" placeholder="请选择年份" @change="changeProfit($event)">
                <el-option v-for="item in ProfitList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div id="J_chartLineBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <el-form>
            <el-form-item>
              订单总数量:
              <el-select v-model="count" placeholder="请选择年份" @change="changeCount($event)">
                <el-option v-for="item in CountList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div id="J_chartBarBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <el-form>
            <el-form-item>
              其他:
              <el-select v-model="bzt" placeholder="请选择年份" @change="changeBzt($event)">
                <el-option v-for="item in BztList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div id="J_chartPieBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <el-form>
            <el-form-item>
              下坠收益 酒民餐:
              <el-select v-model="sy" placeholder="请选择年份" @change="changeSy($event)">
                <el-option v-for="item in SyList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div id="J_chartScatterBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <!-- <el-col :span="24">
        <el-card>
          <el-form>
            <el-form-item>
              下坠收益 酒民餐:
              <el-select v-model="WcSl" placeholder="请选择年份" @change="changeWcSl($event)">
                <el-option v-for="item in WcSlList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div id="J_chartSWcSlBox" class="chart-box"></div>
        </el-card>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      chartLine: null,
      chartBar: null,
      chartPie: null,
      chartWcSl: null,
      chartScatter: null,
      chartPzSyt: null,
      ProfitList: [
        {
          value: "2022",
          label: "2022年",
        },
        {
          value: "2023",
          label: "2023年",
        },
        {
          value: "2024",
          label: "2024年",
        },
        {
          value: "2025",
          label: "2025年",
        },
        {
          value: "2026",
          label: "2026年",
        },
        {
          value: "2027",
          label: "2027年",
        },
        {
          value: "2028",
          label: "2028年",
        },
        {
          value: "2029",
          label: "2029年",
        },
        {
          value: "2030",
          label: "2030年",
        }, {
          value: "2031",
          label: "2031年",
        }
        , {
          value: "2032",
          label: "2032年",
        }
        , {
          value: "2033",
          label: "2033年",
        },
        {
          value: "2034",
          label: "2034年",
        }
      ],
      profit: '',
      upProfit: '2023',
      CountList: [
        {
          value: "2022",
          label: "2022年",
        },
        {
          value: "2023",
          label: "2023年",
        },
        {
          value: "2024",
          label: "2024年",
        },
        {
          value: "2025",
          label: "2025年",
        },
        {
          value: "2026",
          label: "2026年",
        },
        {
          value: "2027",
          label: "2027年",
        },
        {
          value: "2028",
          label: "2028年",
        },
        {
          value: "2029",
          label: "2029年",
        },
        {
          value: "2030",
          label: "2030年",
        }, {
          value: "2031",
          label: "2031年",
        }
        , {
          value: "2032",
          label: "2032年",
        }
        , {
          value: "2033",
          label: "2033年",
        },
        {
          value: "2034",
          label: "2034年",
        }
      ],
      count: '',
      upCount: '2023',
      BztList: [
        {
          value: "2022",
          label: "2022年",
        },
        {
          value: "2023",
          label: "2023年",
        },
        {
          value: "2024",
          label: "2024年",
        },
        {
          value: "2025",
          label: "2025年",
        },
        {
          value: "2026",
          label: "2026年",
        },
        {
          value: "2027",
          label: "2027年",
        },
        {
          value: "2028",
          label: "2028年",
        },
        {
          value: "2029",
          label: "2029年",
        },
        {
          value: "2030",
          label: "2030年",
        }, {
          value: "2031",
          label: "2031年",
        }
        , {
          value: "2032",
          label: "2032年",
        }
        , {
          value: "2033",
          label: "2033年",
        },
        {
          value: "2034",
          label: "2034年",
        }
      ],
      bzt: '',
      upBzt: '2023',
      SyList: [
        {
          value: "2022",
          label: "2022年",
        },
        {
          value: "2023",
          label: "2023年",
        },
        {
          value: "2024",
          label: "2024年",
        },
        {
          value: "2025",
          label: "2025年",
        },
        {
          value: "2026",
          label: "2026年",
        },
        {
          value: "2027",
          label: "2027年",
        },
        {
          value: "2028",
          label: "2028年",
        },
        {
          value: "2029",
          label: "2029年",
        },
        {
          value: "2030",
          label: "2030年",
        }, {
          value: "2031",
          label: "2031年",
        }
        , {
          value: "2032",
          label: "2032年",
        }
        , {
          value: "2033",
          label: "2033年",
        },
        {
          value: "2034",
          label: "2034年",
        }
      ],
      sy: '',
      upSy: '2023',
      WcSlList: [
        {
          value: "2022",
          label: "2022年",
        },
        {
          value: "2023",
          label: "2023年",
        },
        {
          value: "2024",
          label: "2024年",
        },
        {
          value: "2025",
          label: "2025年",
        },
        {
          value: "2026",
          label: "2026年",
        },
        {
          value: "2027",
          label: "2027年",
        },
        {
          value: "2028",
          label: "2028年",
        },
        {
          value: "2029",
          label: "2029年",
        },
        {
          value: "2030",
          label: "2030年",
        }, {
          value: "2031",
          label: "2031年",
        }
        , {
          value: "2032",
          label: "2032年",
        }
        , {
          value: "2033",
          label: "2033年",
        },
        {
          value: "2034",
          label: "2034年",
        }
      ],
      WcSl: '',
      upWcSl: '2023',
      upPst:['2022-01-01']
    }
  },
  mounted() {
    this.initChartWcSl()
    this.initChartLine()
    this.initChartBar()
    this.initChartPie()
    this.initChartScatter()
    this.initChartPzSyt()
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize()
    }
    if (this.chartBar) {
      this.chartBar.resize()
    }
    if (this.chartPie) {
      this.chartPie.resize()
    }
    if (this.chartScatter) {
      this.chartScatter.resize()
    }
    if (this.ChartWcSl) {
      this.ChartWcSl.resize()
    }
    if (this.chartPzSyt) {
      this.chartPzSyt.resize()
    }
  },
  methods: {
    ChartPzSyt(value) {
      console.log(value, 'eeeeeeee')
      this.upPst = value
      this.initChartPzSyt()
    },
    changeWcSl(value) {
      console.log(value, 'eeeeeeee')
      this.upWcSl = value
      this.initChartWcSl()
    },
    changeProfit(value) {
      console.log(value, 'eeeeeeee')
      this.upProfit = value
      this.initChartLine()
    },
    changeCount(value) {
      this.upCount = value
      console.log(value, 'eeeeeeee')
      this.initChartBar()
    },
    changeBzt(value) {
      this.upBzt = value
      console.log(value, 'eeeeeeee')
      this.initChartPie()
    },
    changeSy(value) {
      this.upSy = value
      console.log(value, 'eeeeeeee')
      this.initChartScatter()
    },
    // 车船票订单量
    initChartPzSyt() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("sys/order/queryPzSyt"),
        method: "get",
        params: this.$http.adornParams({
          year: '2023',
          kssj:String(this.upPst[0]),
          jssj:String(this.upPst[1])
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var yAxisdata = []
          var seriesdata1 = []
          var seriesdata2 = []
          data.data.forEach(item => {
            yAxisdata.push(item[0])
            seriesdata1.push(item[1])
            seriesdata2.push(item[2])
          });
         var option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: 'category',
              data: yAxisdata
            },
            series: [
              {
                name: '金额',
                type: 'bar',
                data: seriesdata1
              },
              {
                name: '订单数量',
                type: 'bar',
                data: seriesdata2
              }
            ]
          };
          this.chartPzSyt = echarts.init(document.getElementById('J_chartPzSytBox'))
          this.chartPzSyt.setOption(option)
          window.addEventListener('resize', () => {
            this.chartPzSyt.resize()
          })
        } else {
        }
        this.dataListLoading = false;
      });

    },
    // 全年纯收益【后台-柱状】
    initChartLine() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("sys/order/queryProfit"),
        method: "get",
        params: this.$http.adornParams({
          year: this.upProfit
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var option = {
            xAxis: {
              type: 'category',
              data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
              type: 'value'
            },
            tooltip: {
              trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter: '{b} : {c}' //{b}（数据项名称），{c}（数值）
            },
            series: [
              {
                data: data.data,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(111, 162, 135, 0.2)'
                },
                itemStyle: {
                  normal: {
                    //这里是颜色
                    color: function (params) {
                      //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                      var colorList = ['#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622', '#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83'];
                      return colorList[params.dataIndex]
                    }
                  }
                }
              }
            ]
          };
          this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
          this.chartLine.setOption(option)
          window.addEventListener('resize', () => {
            this.chartLine.resize()
          })
        } else {
        }
        this.dataListLoading = false;
      });


    },
    // 订单总数量【后台-柱状】
    initChartBar() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("sys/order/queryOrderCount"),
        method: "get",
        params: this.$http.adornParams({
          year: this.upCount
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var option = {
            xAxis: {
              type: 'category',
              data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
              type: 'value'
            },
            tooltip: {
              trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter: '{b} : {c}' //{b}（数据项名称），{c}（数值）
            },
            series: [
              {
                data: data.data,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(111, 162, 135, 0.2)'
                },
                itemStyle: {
                  normal: {
                    //这里是颜色
                    color: function (params) {
                      //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                      var colorList = ['#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622', '#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83'];
                      return colorList[params.dataIndex]
                    }
                  }
                }
              }
            ]
          };
          this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
          this.chartBar.setOption(option)
          window.addEventListener('resize', () => {
            this.chartBar.resize()
          })
        } else {
        }
        this.dataListLoading = false;
      });

    },
    // 饼状图
    initChartPie() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("sys/order/queryBzt"),
        method: "get",
        params: this.$http.adornParams({
          year: this.upBzt
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var option = {
            title: {
              text: '',
              subtext: '',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            title :[
              {
                text:''
              }
            ],
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: data.data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          this.chartBar = echarts.init(document.getElementById('J_chartPieBox'))
          this.chartBar.setOption(option)
          window.addEventListener('resize', () => {
            this.chartBar.resize()
          })
        } else {
        }
        this.dataListLoading = false;
      });

      // this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
      // this.chartPie.setOption(option)
      // window.addEventListener('resize', () => {
      //   this.chartPie.resize()
      // })
    },
    // 散点图
    initChartScatter() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("sys/order/queryXzSy"),
        method: "get",
        params: this.$http.adornParams({
          year: this.upSy
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var option = {
           
            tooltip: {
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: 'category',
              data: data.nameList
            },
            series: [
              {
                name: '2011',
                type: 'bar',
                data: data.moneyList
              },
            ]
          };
          this.chartPie = echarts.init(document.getElementById('J_chartScatterBox'))
          this.chartPie.setOption(option)
          window.addEventListener('resize', () => {
            this.chartPie.resize()
          })
        } else {
        }
        this.dataListLoading = false;
      });
      
    },
    initChartWcSl() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("sys/order/queryXzWcSl"),
        method: "get",
        params: this.$http.adornParams({
          year: this.upWcSl
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var option = {
           
            tooltip: {
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: 'category',
              data: data.nameList
            },
            series: [
              {
                name: '2011',
                type: 'bar',
                data: data.slList
              },
            ]
          };
          this.charWcSl = echarts.init(document.getElementById('J_chartSWcSlBox'))
          this.charWcSl.setOption(option)
          window.addEventListener('resize', () => {
            this.charWcSl.resize()
          })
        } else {
        }
        this.dataListLoading = false;
      });
      
    },
  }
}
</script>

<style lang="scss">
.mod-demo-echarts {
  >.el-alert {
    margin-bottom: 10px;
  }

  >.el-row {
    margin-top: -10px;
    margin-bottom: -10px;

    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  .chart-box {
    height: 400px;
  }
}
</style>
